.fs-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: all .2s;
  font-weight: 500;
  padding: 0 20px;
  height: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 20px;

  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;

  &:hover {
    background-color: #ebebeb;
    border-color: #c5c9d1;
    color: #000;
  }

  &:focus {
    outline: none;
  }

  &:active {
    background-color: #fff;
    border-color: #dcdfe6;
    color: #606266;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:active {
    color: var(--fs-text-color-disabled);
    cursor: not-allowed;
    background-image: none;
    background-color: var(--fs-fill-color-dark);
    border-color: var(--fs-border-color-light);
  }

  &.fs-button--primary {
    background-color: #7a52c8;
    border-color: #7a52c8;
    color: #fff;

    &:hover {
      background-color: #5e35b0;
      border-color: #5e35b0;
      color: #fff;
    }

    &:active {
      background-color: #7a52c8;
      border-color: #7a52c8;
      color: #fff;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:active {
      color: var(--fs-color-white);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--fs-color-primary-light-5);
      border-color: var(--fs-color-primary-light-9);
    }
  }

  &.fs-button--success {
    background-color: #56c852;
    border-color: #56c852;
    color: #fff;

    &:hover {
      background-color: #3aac36;
      border-color: #3aac36;
      color: #fff;
    }

    &:active {
      background-color: #56c852;
      border-color: #56c852;
      color: #fff;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:active {
      color: var(--fs-color-white);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--fs-color-success-light-5);
      border-color: var(--fs-color-success-light-9);
    }
  }

  &.fs-button--info {
    background-color: #52bcc8;
    border-color: #52bcc8;
    color: #fff;

    &:hover {
      background-color: #3296a2;
      border-color: #3296a2;
      color: #fff;
    }

    &:active {
      background-color: #52bcc8;
      border-color: #52bcc8;
      color: #fff;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:active {
      color: var(--fs-color-white);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--fs-color-info-light-5);
      border-color: var(--fs-color-info-light-9);
    }
  }

  &.fs-button--warning {
    background-color: #c8b252;
    border-color: #c8b252;
    color: #fff;

    &:hover {
      background-color: #97842e;
      border-color: #97842e;
      color: #fff;
    }

    &:active {
      background-color: #c8b252;
      border-color: #c8b252;
      color: #fff;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:active {
      color: var(--fs-color-white);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--fs-color-warning-light-5);
      border-color: var(--fs-color-warning-light-9);
    }
  }

  &.fs-button--danger {
    background-color: #c85252;
    border-color: #c85252;
    color: #fff;

    &:hover {
      background-color: #a42e2e;
      border-color: #a42e2e;
      color: #fff;
    }

    &:active {
      background-color: #c85252;
      border-color: #c85252;
      color: #fff;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:active {
      color: var(--fs-color-white);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--fs-color-danger-light-5);
      border-color: var(--fs-color-danger-light-9);
    }
  }
}